<template>
  <div class="app-container">

    <div class="filter-container">
      <div>
        <el-button-group class="filter-item">
          <el-button
            size="small"
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="newContent"
          >
            新增文案
          </el-button>
        </el-button-group>
        <el-button-group class="filter-item">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh-left"
            @click="refresh"
          >
            刷新
          </el-button>
        </el-button-group>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      height="100%"
      class="table-container"
      highlight-current-row
    >

      <el-table-column
        width="80"
        label="id"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column
        width="100"
        label="简写"
        align="center"
      >
        <template slot-scope="scope">
          <div style="font-size:14px;">
            {{ scope.row.title }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        width="600"
        label="内容"
        align="left"
      >
        <template slot-scope="scope">
          <div style="font-size:14px;">
            {{ scope.row.content }}
          </div>
        </template>
      </el-table-column>


      <el-table-column
        label="操作"
        width="135"
        align="center"
      >
        <template slot-scope="scope">
          <div style="color: rgb(64, 158, 255); font-size: 14px; cursor: pointer;display: inline-block"
               @click="edit(scope.row.id)"
          >编辑
          </div>
          <div style="color: rgb(64, 158, 255); font-size: 14px; cursor: pointer;display: inline-block;margin-left:30px"
               @click="del(scope.row.id)"
          >删除
          </div>
        </template>
      </el-table-column>

    </el-table>


    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
    <el-dialog
      :visible.sync="dialogVisible"
      width="600px"
      :title="dialogType === 'modify' ? '修改' : '新增'"
    >
      <el-form
        ref="dataForm"
        :model="temp"
        label-width="120px"

        label-position="right"
      >
        <el-form-item label="标题简写">
          <el-input v-model="temp.title" placeholder="例如：重复件"/>
        </el-form-item>
        <el-form-item label="完整文案">
          <el-input type="textarea" v-model="temp.content" placeholder="完整文案" :rows="4"/>
        </el-form-item>
      </el-form>
      <div class="text-right">
        <el-button type="danger" @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="newContentSubmit">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { addFastReply, delFastReply, getByIdFastReply, getFastReply } from '@/api/wz'

let id = 0
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      list: [],
      temp: { title: '', content: '' ,id:0},
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      loading: false,
      dialogVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    newContentSubmit() {
      this.listLoading = true
      addFastReply(this.temp).then(response => {
        this.dialogVisible = false
        this.fetchData()
        this.temp = { title: '', content: '',id:0}
      })
    },
    edit(id) {
      getByIdFastReply({ id: id }).then(response => {
        this.dialogVisible = true
        this.temp = { title: response.data.title, content:response.data.content,id:id }
      })
    },
    del(id) {
      this.$confirm('此操作将永久删除该文案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        delFastReply({ id: id }).then(response => {
          this.fetchData()
        })
      }).catch(() => {
      })
    },
    newContent() {
      this.temp = { title: '', content: '',id:0}
      this.dialogVisible = true
      return false
    },
    refresh() {
      this.listQuery = {
        page: 1,
        limit: 20
      }
      this.fetchData()
    },

    fetchData(column) {
      getFastReply(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    submit() {

    }
  }
}
</script>
